<template>
	<div class="store">
		<div class="fixed-t bg-white"> 
			<section class="index-top layout pl30rem pr30rem">
				<i class="iconfont icon-zuo fs50rem white" @click="$router.back(-1)" v-if="showApp != '1'"></i>
				<search-bar class="flex_1"></search-bar>
				<div class="inform white">
					<!-- <router-link tag='i' to="/shop/class/classify" class="iconfont icon-gengduo mr10rem"></router-link> -->
					<!-- <i class="iconfont icon-gengduo mr10rem"></i> -->
					<!-- <i class="iconfont icon-more"></i> -->
				</div>
			</section>
			<section class="store-title border-b20" :style="{ backgroundImage:'url('+ img_url + data.shop_banner +')'}" v-if="data.shop_banner">
				<div class="store-title-box layout pt45rem pl30rem pr30rem" >
					<img :src="img_url + data.shop_avatar" alt="" v-if="data.shop_avatar">
					<div class="center-text flex_1 ml20rem">
						<p class="fs34rem white mb15rem">{{ data.shop_name }}</p>
						<span class="cxo-red pt5rem pb5rem pl20rem pr20rem white" v-if='isAttention' @click="attention">已关注</span>
						<span class="cxo-red pt5rem pb5rem pl20rem pr20rem white" v-else @click="attention">+关注</span>
					</div>
					<div class="fans">
						<span class="fs34rem ced">{{ data.fans_count }}</span>
						<p class="fs24rem ced">粉丝数</p>
					</div>
				</div>
			</section>
			<section class="store-nav">
				<ul class="pl30rem pr30rem flex-left">
					<li class="fs30rem c666 align-center" :class="view == 0?'select-color':''" @click="showView('0')">店铺首页</li>
					<li class="fs30rem c666 align-center" :class="view == 1?'select-color':''" @click="showView('1')">新品体验</li>
					<li class="fs30rem c666 align-center" :class="view == 2?'select-color':''" @click="showView('2')">新品预售</li>
					<li class="fs30rem c666 align-center" :class="view == 3?'select-color':''" @click="showView('3')">在售商品</li>
				</ul>
			</section>
		</div>
		<section style="margin-top:13.5rem;" class="banner-img">
			<swiper :data="bannerData" img-key="ad_image" :options="Options"></swiper>
		</section>
		<section class="store-content" v-if="flag">
			<h3 class="product-title layout align-center"> 
				<p class="layout">
					<i class="rhombus rhombus-son"></i>
					<i class="rhombus ml15rem"></i>
				</p>
				<strong class='fs34rem c333 bold'>新品推荐</strong>
				<p class="layout">
					<i class="rhombus mr15rem"></i>
					<i class="rhombus rhombus-son"></i>
				</p>
			</h3>
			<ul class="pl30rem pr30rem layout-juscon flex-w"  v-infinite-scroll="loadRecommend" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
				<!-- 体验 -->
				<li 
				class="pb60rem" 
				v-for="item in recommendData"
				:key="item.recommend_id"
				>
				<!-- 拼团 -->
					<template v-if="item.booking_type == 4">
						<router-link :to="'/ordering/detail/commodity-detail/' + item.goods_id"> 
							<img class="responsive-img block auto" alt="" :src="img_url + item.pic_cover_small">
							<p class="c333 fs30rem bold mt20rem mb20rem">{{item.goods_name}}</p>
							<!-- <div class="layout">
								<span class="fs24rem c999">送出了{{ item.shares }}份</span>
								<span class="fs24rem c999">已有{{ item.sales }}人预约</span>
							</div> -->
							<div class="layout mt20rem">
								<p>
									<strong class="mr15rem fs34rem red bold">￥{{item.price}}</strong>
									<!-- <i class="red fs16rem experience">预购价</i> -->
								</p>
								<!-- <del class="fs20rem c999">原价:{{item.market_price}}元</del> -->
							</div>
							<!-- <button class="block auto algin-center cxo-red white w100 pt25rem pb25rem mt40rem">预约中</button> -->
						</router-link>	
					</template>
				<!-- 体验 -->
					<template v-if="item.booking_type == 1">
						<router-link :to="'/detail/experience-detail/' + item.goods_id + '?status=2'+'&ty=true'" >	
							<img class="responsive-img block auto" alt="" :src="img_url + item.pic_cover_small">
							<p class="c333 fs30rem bold mt20rem mb20rem ellipsis-more" style="height:3rem">{{item.goods_name}}</p>
							<p class="layout mt10rem mb10rem">
								<strong class="mr15rem fs34rem red bold">￥{{item.price}}</strong>
								<span class="fs24rem c53">送出了{{item.shares}}份</span>
							</p>
							<del class="fs20rem c999">原价:{{item.market_price}}元</del>
							<div class="layout">
								<strong class="fs20rem c38">预约倒计时</strong>
								<countdown :data="item.ty_count_down" :type="countdownType"></countdown>	
							</div>
							<!-- <button class="mt20rem auto w92 bg-red radius-10 white pl35rem pr35rem pt10rem pb10rem">预约体验</button> -->
						</router-link>	
					</template>
					<!-- 预购 -->
					<template v-if="item.booking_type == 2">
						<router-link :to="'/ordering/detail/commodity-detail/' + item.goods_id"> 
							<img class="responsive-img block auto" alt="" :src="img_url + item.pic_cover_small">
							<p class="c333 fs30rem bold mt20rem mb20rem ellipsis-more" style="height:3rem">{{item.goods_name}}</p>
							<div class="layout mt10rem mb10rem">
								<span class="fs24rem c999">送出了{{ item.shares }}份</span>
								<span class="fs24rem c999">已有{{ item.sales }}人预约</span>
							</div>
							<p class="mt10rem mb10rem">
								<strong class="mr15rem fs34rem red bold">￥{{item.price}}</strong>
								<i class="red fs16rem experience">预售价</i>
							</p>
							<del class="fs20rem c999">原价:{{item.market_price}}元</del>
							<button class="auto w92 block auto algin-center cxo-red white w100 pt10rem pb10rem mt40rem">预售中</button>
						</router-link>	
					</template>
					<!-- 在售 -->
					<template v-if="item.booking_type == 3">
						<router-link :to="'/mall/mall-detail/' + item.goods_id"> 
							<img class="block auto responsive-img" alt="" :src="img_url + item.pic_cover_small">
							<p class="c333 fs30rem bold mt20rem mb20rem ellipsis-more" style="height:3rem">{{item.goods_name}}</p>
							<div class="layout">
								<p><strong class="mr15rem fs34rem red bold">￥{{item.price}}</strong></p>
							</div>
						</router-link>	
					</template>
				</li>
			</ul>
		</section>
		<template v-else>
			<default :imgUrl="img" explain="暂无商品信息"></default>
		</template>
	</div>
</template>

<script>
	import { getShopinfo, getShopBanner, getShopList } from '@/api/shop';
	import { isAttention, addAttention, delAttention } from '@/api/shopping-cart';
	import SearchBar from '@/components/Search-bar';
	import Countdown from "@/components/Countdown";
	import Swiper from '@/components/Swiper';
	import Default from '@/components/Default';
	import { InfiniteScroll } from 'mint-ui';
	export default{
		components: {
			SearchBar,
			Countdown,
			Swiper,
			Default
		},
		directives:{
			InfiniteScroll
		},
		data()
		{
			return{
				data          : [],
				bannerData    : [],
				recommendData : [],
				countdownType : true,
				view          : '0',
				page_index    : 1,
				page_size     : 10,
				loading       : false,
				flag          : true,
				isAttention   : false,
				img_url       : process.env.IMG_URL,
				shop_id       : this.$route.params.id,
				showApp       : window.sessionStorage.getItem('isapp'),
				uid           : window.localStorage.getItem('uid'),
				img           : require('../../assets/icon-goods2.png'),
				Options:{
					slidesPerView : 'auto',
					loopedSlides  : 'auto',
					autoplay: {
						delay: 5000,
					},
					pagination: {
				    	el: '.swiper-pagination',
				    	bulletClass : 'my-red',
					},
				}
			}
		},
		created()
		{
			this.loadData();
		},
		methods:
		{
			showView(Num)
			{	
				this.view  = Num;
				this.loadInitData();
			},
			loadData()
			{
				this.loadHomeData();
				this.loadBanner();
				this.loadRecommend();
				this.judgeAttention();
			},
			loadHomeData()
			{
				getShopinfo(this.shop_id).then( res => {
					this.data = res.data;
				});
			},
			loadRecommend()
			{
				this.loading = true;
				var params = {
					shop_id    : this.shop_id,
					type       : this.view,
					page_index : this.page_index++,
					page_size  : this.page_size
				}
				getShopList(params).then(res => {
					if(res.data.length > 0 )
					{
						this.recommendData = this.recommendData.concat(res.data);
						this.loading = false;
					}
					else if (params.page_index > 1)
					{
						$toast('没有更多了');
					}
					else
					{
						this.flag = false;
					}
					if(res.data.length < params.page_size)
					{
						this.loading = true;
					}
				});
			},
			loadBanner()
			{
				getShopBanner(this.shop_id).then(res => {
					this.bannerData = res.data;
				})
			},
			loadInitData()
			{
				this.recommendData = [];
				this.page_index = 1;
				this.flag = true;
				this.loadRecommend();
			},
			//判断关注状态
			judgeAttention()
			{
				if(!this.uid){
					 return this.$router.replace('/login?redirect=' + this.$router.currentRoute.fullPath);
				}
				else
				{
					var params = {
						fav_id : this.shop_id,
						fav_type: 'shop',
						uid : this.uid
					}
					isAttention(params).then( res => {
						if(res.data == 1){
							this.isAttention = true;
						}
						if(res.data == 0){
							this.isAttention = false;
						}
					})
				}
				
			},
			//关注取消，添加
			attention()
			{
				if(!this.uid){
					 return this.$router.replace('/login?redirect=' + this.$router.currentRoute.fullPath);
				}

				var params = {
					fav_id : this.shop_id,
					fav_type: 'shop',
					uid : this.uid
				}
				if(this.isAttention){

					delAttention(params).then( res => {
						this.isAttention = false;
					})
				}
				else
				{
					addAttention(params).then( res => {
						this.isAttention = true;
					})
				}
			},
		}
	}
</script>

<style lang="less">
	.store{
		.index-top{
			height: 90/28rem;
			background: #ff0036;
			.inform{
				position:relative;
				.hint{
					background-color: #fff;
					color: #ff0036;
					font-size: 20/28rem;
					text-align:center;
					width: 50/28rem;
					height: 25/28rem;
					line-height: 25/28rem;
					position: absolute;
					top:-5/28rem;
					right: -15/28rem;
					border-radius: 15/28rem;
				}
				i{
					font-size: 52/28rem;
				}
			}
		}
		.banner-img{
			.swiper-slide{
				height: 300/28rem;
				img{
					height: 100%;
					object-fit: cover;
				}
			}
		}
		.store-title{
			background-repeat: no-repeat;
			background-position: center;
			background-size: 100% 100%;
			.store-title-box{
				background-color: rgba(0,0,0,0.4);
			}

			img{
				width: 130/28rem;
				height: 120/28rem;
				object-fit: cover;
			}
			.center-text{
				span{
					border-radius: 5/28rem;
				}
			}
		}
		.store-nav{
			ul{
				height: 100/28rem;
				line-height: 100/28rem;
				li{
					width: 25%;
				}
				.select-color{
					font-weight: 600;
					color: #333;
					position: relative;
				}
				.select-color:after{
					content:'';
					display: block;
					width: 50%;
					height: 4/28rem;
					background-color: #ff0000;
					position: absolute;
					bottom: 8%;
					left: 50%;
					transform: translate(-50%,0);
				}

			}
		}
		.store-content{
			ul{
				li{
					width:48%;
					.count-down{
						.day{
							font-size: 18/28rem;
						}
						span{
							background-color: #383838;
						}
						strong{
							i{
								background-color: #383838;
							}
						}
					}
					button{
						border-radius:8/28rem;
					}
					&:first:child{
						padding-top: 0;
					}
				}
			}
		}
		.experience{
    		border-radius: 5/28rem;
    		background-color: #ffdee5;
    		padding:2/28rem 5/28rem;
    		vertical-align: top;
    	}

    	.swiper-container{
    		z-index: 0;
    	}
	}
</style>
